*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
#header{
    width: 10rem;
    height: 50px;
    background-color: #1D6DFF;
    .xz{
        color: white;
        font: .48rem/1.3333rem "";
    }
}
#search{
    width: 10rem;
    height: 50px;
    border-bottom: .0267rem solid #ccc;
    overflow: hidden;
    position: relative;
    .search{
        height: .8rem;
        overflow: hidden;
        width: 9.4667rem;
        margin: .2667rem auto;
        .txt{
            float: left;
            background-color: #F1F1F1;
            height: .8rem;
            width: 8.4rem;
            border: none;
            border-radius: .4rem;
            font: .4267rem/.8rem "";
            padding-left: .2667rem;
        }
        p{
            float: right;
            background-color: #1D6DFF;
            color: white;
            height: .8rem;
            width: 1.7333rem;
            font: .4267rem/.8rem "";
            border-radius: .4rem;
            text-align: center;
            position: absolute;
            right: .2667rem;
            top: .2667rem;
        }
    }
}
#tag{
    .tag{
        width: 10rem;
        height: 1.0667rem;
        background-image: linear-gradient(#fff, #ccc);
        .puba{
            text-decoration: none;
            color: black;
            font: .3733rem/1.0667rem "";
        }
        .a1{
            margin-left: .2667rem;
        }
    }
}
#hotrank{
    background-color: #F4F4F4;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin: .2667rem 0;
    p{
        font: .3733rem/.4267rem "";
        margin: .2667rem;

    }
}
#main{
    .lis{
        li{
            .clickp{
                height: 1.0667rem;
                background-color: #F5F5F5;
                position: relative;
                border-bottom: #666 1px solid;
                .title{
                    width: 4.8rem;
                    position: absolute;
                    font-weight: none;
                    font: .48rem/1.0667rem "";
                    // text-align: center;
                    margin-left: .2667rem;
                }
                .xiala{
                    position: absolute;
                    right: .4rem;
                    font: .48rem/1.0667rem "";
                }
            }
            ol{
                overflow: hidden;
                width: 9.9rem;
                margin: 0 auto;
                display: none;
                li{
                    border-bottom: 1px solid #ccc;
                    .p1{
                        margin: .5333rem;
                        .tip{
                            display: inline-block;
                            font: .5333rem/.5867rem "";
                            background-color: #CCCCCC;
                            width: .6667rem;
                            height: .6667rem;
                            text-align: center;
                        //js获取结构渲染过后前三个添加背景色
                        }
                        .text{
                            font: .5333rem/.5867rem "";
                            margin-left: .2667rem;
                        }
                    }
                    .p2{
                        width: 5.3333rem;
                        padding-left: .5333rem;
                        font: .32rem/.3733rem "";
                        color: #999999;
                    }
                }
            }
        }
    }
    #more{
        height: 1.6rem;
        background-color: #F4F4F4;
        p{
            height: .8rem;
            border: 1px solid #ccc;
            border-radius: .1333rem;
            margin: .2667rem .2667rem 0 .2667rem;
            text-align: center;
            font: .32rem/.8rem "";
            color: #666;
        }
    }
}
#foot{
    .title{
        color: white;
        background-color: #1D6DFF;
        width: 10rem;
        height: .9333rem;
        font: .5rem/.9333rem "";
        font-weight: bold;
    }
    ul{
        width: 10rem;
        display: flex;
        margin: 15px 0;
        li{
            border-top: 1px solid #666;
            border-bottom: 1px solid #666;
            flex: 1;
            height: .9067rem;
            text-align: center;
            color: #666;
            font: .3733rem/.9067rem "";
        }
        .li1{
            border-right: 1px solid #666;
        }
        .li3{
            border-left: 1px solid #666;
        }
    }
    .p1{
        height: 1.0133rem;
        width: 10rem;
        text-align: center;
        font: .3733rem/.5067rem "";
        color: #666;
    }
}
.title{
    position: relative;
}
#x{
    position: absolute;
    right: .5333rem;
}